import { defineComponent } from 'vue';
import { ElIcon, ElImage, ElTooltip } from 'element-plus';
import { ArrowRight, QuestionFilled } from "@element-plus/icons-vue";
import "./index.less";
 

export default defineComponent({
    name: 'SheltV2',
    props: {
        title: {
            type: String
        },
        question: {
            type: String
        },
        style: {},
        more: {
            type: String,
            default: "查看全部"
        },
    },
    emits: ["viewDetail"],
    setup(props: any, { slots, emit }) {
        const {VITE_STATIC_URL} = import.meta.env;
        return () => (
            <div class="sheltv2">
                <header class="flex-between">
                    <div class="flex-start">
                        <div class="title">{props.title}</div>
                        {props.question && <ElTooltip
                            effect="light"
                            placement='top'
                            raw-content
                            content={props.question}
                        >
                            <ElImage src={`${VITE_STATIC_URL}/tcpl/question.png`}></ElImage>
                        </ElTooltip>}
                    </div>
                    <div class="detail flex-start">
                        <slot>{slots.detail?.()}</slot>
                        <main><span style={{paddingLeft:"10px"}} onClick={() => emit('viewDetail')}>{props.more}</span>
                        <ElIcon><ArrowRight /></ElIcon></main>
                    </div>
                </header>
                <div style={{transform:"translateY(-15px)"}}><slot>{slots.fill?.()}</slot></div>
                <main>
                    <slot>{slots.default?.() || "暂无数据"}</slot>
                </main>
            </div>
        );
    }

});
